<template>
  <div id="app" v-if="navIndex != 'login'">
    <!-- left -->
    <div class="app-nav">
      <div class="logo">
        <img src="./assets/img/logo.png" alt="" srcset="" />
        <span class="app-name">后台管理系统</span>
      </div>
      <!-- 用户权限是3 -->
      <ul v-if="role == 3" class="nav">
        <li
          class="nav-item"
          :class="{ 'nav-active': navIndex == 'CheckView' }"
          @click="toPage('CheckView', '/CheckView')"
        >
          审核记录
        </li>
      </ul>
      <!-- 用户权限是1,2 -->
      <ul v-if="role != 3" class="nav">
        <li
          class="nav-item"
          :class="{ 'nav-active': navIndex == 'home' }"
          @click="toPage('home', '/')"
        >
          官方数据
        </li>
        <li
          class="nav-item"
          :class="{ 'nav-active': navIndex == 'users' }"
          @click="toPage('users', '/users')"
        >
          用户数据
        </li>
        <li
          class="nav-item"
          :class="{ 'nav-active': navIndex == 'risks' }"
          @click="toPage('risks', '/risks')"
        >
          风控流水
        </li>
        <li
          class="nav-item"
          :class="{ 'nav-active': navIndex == 'nfts' }"
          @click="toPage('nfts', '/nfts')"
        >
          NFT数据
        </li>
        <li
          class="nav-item"
          :class="{ 'nav-active': navIndex == 'wd' }"
          @click="toPage('wd', '/wd')"
        >
          提取记录
        </li>
        <li
          v-if="role == 1"
          class="nav-item"
          :class="{ 'nav-active': navIndex == 'CheckView' }"
          @click="toPage('CheckView', '/CheckView')"
        >
          审核记录
        </li>
        <li
          class="nav-item"
          :class="{ 'nav-active': navIndex == 'CustomerService' }"
          @click="toPage('CustomerService', '/CustomerService')"
        >
          客服专区
        </li>
        <li
          v-if="role == 1"
          class="nav-item"
          :class="{ 'nav-active': navIndex == 'admin' }"
          @click="toPage('admin', '/admin')"
        >
          账号管理
        </li>
      </ul>
    </div>
    <!-- right -->
    <div class="app-main">
      <!-- right-head -->
      <div class="app-main-head">
        <div class="page-title">
          <img src="./assets/img/ico.png" alt="" srcset="" />
          <p>{{ name }}</p>
        </div>
        <p>{{ UserName }}</p>
        <button @click="loginout()">退出登录</button>
      </div>
      <!-- home page -->
      <div class="app-content">
        <router-view />
      </div>
    </div>
  </div>
  <div id="login" v-else>
    <router-view />
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      navIndex: "home",
      UserName: "管理员",
      name: "",
    };
  },
  computed: {
    ...mapState(["role"]),
  },
  created() {
    var role = localStorage.getItem("role");
    if (role) {
      this.$store.commit("SET_ROLE", role);
    }
    var UserName = localStorage.getItem("UserName");
    this.UserName = UserName || "管理员";
  },
  mounted() {
    var routes = this.$route;
    this.name = routes.meta;
    this.navIndex = routes.name;
  },
  watch: {
    $route(va) {
      this.name = va.meta;
      this.navIndex = va.name;
    },
  },
  methods: {
    toPage(index, url) {
      this.navIndex = index;
      this.$router.push({
        path: url,
      });
    },
    loginout() {
      this.$confirm("确定要退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          localStorage.removeItem("adminToken");
          this.$router.push({
            path: "/login",
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
#app {
  width: 100%;
  height: 100%;
  display: flex;
  background: #f1f2ff;
}

#login {
  width: 100%;
  height: 100%;
}
.page-title {
  display: flex;
  align-items: center;
  flex: 1;
  padding-left: 20px;
  p {
    margin-left: 10px;
    font-size: 24px;
    color: #333333;
  }

  img {
    width: 24px;
  }
}
.app-nav {
  width: 240px;
  background: #fff;
  box-shadow: 5px 0px 8px 0px rgba(193, 193, 193, 0.5);
  z-index: 1;
  user-select: none;

  .logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0;

    .app-name {
      font-family: "RALE";
      font-size: 20px;
      margin-top: 10px;
    }
  }

  .nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .nav-item {
      height: 50px;
      line-height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "RALE";
      font-size: 16px;
      width: 100%;
      cursor: pointer;
    }

    .nav-active {
      background: #e4e7ff;
      position: relative;
      color: #5261ff;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 5px;
        background: #5261ff;
        z-index: 1;
      }
    }
  }
}

.app-main {
  // flex: 1;
  width: calc(100% - 240px);
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.app-main-head {
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;

  p {
    font-size: 16px;
    margin-right: 10px;
  }

  button {
    height: 30px;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 30px;
    background: #5261ff;
    color: #fff;
    border-radius: 4px;

    &:active {
      opacity: 0.7;
    }
  }
}

.app-content {
  overflow-y: scroll;
  flex: 1;
}
</style>
